import { Component, OnInit, HostBinding } from '@angular/core';
import { Router } from '@angular/router';
import { SlideInDownAnimation } from '../animations';


@Component({
  selector: 'app-compose-message',
  templateUrl: './compose-message.component.html',
  styleUrls: ['./compose-message.component.css'],
  animations: [SlideInDownAnimation]
})

/*
  它看起来几乎和我们以前看到的其它组件一样，但有两个值得注意的区别。
  1: 主要send()方法在发送消息和关闭弹出框之前通过等待模拟了一秒钟的延迟。
  2: closePopup()方法用把popup出口导航到null的方式关闭了弹出框。
  这个奇怪的用法在稍后的部分有讲解。
*/

export class ComposeMessageComponent implements OnInit {
  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') position = 'absolute';

  details: string;
  sending = false;

  constructor(private router: Router) { }

  ngOnInit() {
  }

  send() {
    this.sending = true;
    this.details = 'Sending Message...';

    // send()方法在发送消息和关闭弹出框之前通过等待模拟了一秒钟的延迟。
    setTimeout(() => {
      this.sending = false;
      this.closePopup();
    }, 1000);
  }

  cancel() {
    this.closePopup();
  }

  closePopup() {
    // Providing a `null` value to the named outlet
    // clears the contents of the named outlet
    // closePopup()方法用把popup出口导航到null的方式关闭了弹出框。
    this.router.navigate([{ outlets: { popup: null } }]);
  }

}

